import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface MixLineBarProps {
    chartId?: string;
    width?: string;
    height?: string;
    legend?: string[];
    xAxisData?: string[];
    yAxisName?: string[];
    yAxisUnit?: string[];
    yAxisInterval?: number[];
    yAxisRange?: number[][];
    seriesData?: number[][];
    seriesType?: string[];
    seriesIndex?: number[];
}

@customElement('lit-mix-line-bar')
export class LitMixLineBar extends LitElement {
    @property({type: String}) chartId: string = 'lit-mix-line-bar-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Array}) legend: string[] = ['Evaporation', 'Precipitation', 'Temperature'];
    @property({type: Array}) xAxisData: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    @property({type: Array}) yAxisName: string[] = ['Precipitation', 'Temperature'];
    @property({type: Array}) yAxisUnit: string[] = ['ml', '°C'];
    @property({type: Array}) yAxisInterval: number[] = [50, 5];
    @property({type: Array}) yAxisRange: number[][] = [[0, 250], [0, 25]];
    @property({type: Array}) seriesData: number[][] = [
        [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    ];
    @property({type: Array}) seriesType: string[] = ['bar', 'bar', 'line'];
    @property({type: Array}) seriesIndex: number[] = [0, 0, 1];

    getYAxis(): any[] {
        return this.yAxisName.map((name, index) => ({
            type: 'value',
            name: name,
            min: this.yAxisRange[index][0],
            max: this.yAxisRange[index][1],
            interval: this.yAxisInterval[index],
            axisLabel: {
                formatter: `{value} ${this.yAxisUnit[index]}`
            }
        }));
    }

    getSeries(): any[] {
        const yAxisUnit = this.yAxisUnit;
        const seriesIndex = this.seriesIndex;
        return this.seriesData.map((data, index) => ({
            name: this.legend[index],
            type: this.seriesType[index] || 'bar',
            yAxisIndex: this.seriesIndex[index] || 0,
            data: data,
            tooltip: {
                valueFormatter: function (value: any): string {
                    return value + ' ' + (yAxisUnit[seriesIndex[index]] || '');
                }
            }
        }));
    }

    option: echarts.EChartsOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: this.legend,
        },
        xAxis: [
            {
                type: 'category',
                data: this.xAxisData,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: this.getYAxis(),
        series: this.getSeries(),
    };

    static styles = style;

    updated() {
        this.option.legend = {data: this.legend};
        (this.option.xAxis as any)[0].data = this.xAxisData;
        this.option.yAxis = this.getYAxis();
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-mix-line-bar': LitMixLineBar;
    }
}